<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item>管理</el-breadcrumb-item>
      <el-breadcrumb-item>分析</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <div class="match-header">
        <div>{{ matchInfo.zhudui }}</div>
        <div>{{ matchInfo.data }}</div>
        <div>{{ matchInfo.kedui }}</div>
      </div>
      <div class="match-header1">
        <div>比分：{{ matchInfo.score }}</div>
      </div>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="date" label="公司名">
          <el-table-column prop="name"></el-table-column>
        </el-table-column>
        <el-table-column label="欧洲指数">
          <el-table-column prop="ouzhu" label="主"></el-table-column>
          <el-table-column prop="ouping" label="平"></el-table-column>
          <el-table-column prop="ouzhu" label="客"></el-table-column>
          <el-table-column prop="oupei" label="赔付率"></el-table-column>
        </el-table-column>
        <el-table-column label="转换后亚盘">
          <el-table-column prop="yazhu" label="主"></el-table-column>
          <el-table-column prop="yapan" label="盘"></el-table-column>
          <el-table-column prop="yake" label="客"></el-table-column>
          <el-table-column prop="yashui" label="总水位"></el-table-column>
        </el-table-column>
        <el-table-column label="实际最新亚盘">
          <el-table-column prop="newzhu" label="主"></el-table-column>
          <el-table-column prop="newpan" label="盘"></el-table-column>
          <el-table-column prop="newke" label="客"></el-table-column>
          <el-table-column prop="newshui" label="总水位"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showBox(scope.row)">更多</el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>


      <div class="match-header2">
      <el-table :data="yingkuiList" style="width: 100%">
          <el-table-column prop="date" label="必发成交数据" width="150">
            <el-table-column prop="jiawei" label="价位" width="120"></el-table-column>
            <el-table-column prop="chengjiaoliang" label="成交量" width="120"></el-table-column>
            <el-table-column prop="zhuangjiayingkui" label="庄家盈亏" width="120"></el-table-column>
          </el-table-column>
          <el-table-column label="庄家盈亏指数 ">
            <el-table-column prop="bifa" label="必发" width="120"></el-table-column>
            <el-table-column  prop="jingcai" label="竞彩" width="120"></el-table-column>
          </el-table-column>
      </el-table>
    </div>

    <div class="match-header3">
      <el-table :data="k" style="width: 100%">
          <el-table-column  label="凯利离散值最新数据" width="150">
            <el-table-column prop="zhu" label="主胜" width="120"></el-table-column>
            <el-table-column prop="ke" label="平局" width="120"></el-table-column>
            <el-table-column prop="ping" label="客胜" width="120"></el-table-column>
          </el-table-column>
            <el-table-column  label="竞彩与皇冠盘口统计情况" width="150">
            <el-table-column prop="winCount" label="主队胜场数" width="120"></el-table-column>
            <el-table-column prop="pingCount" label="平局数" width="120"></el-table-column>
            <el-table-column prop="loseCount" label="主队败场数" width="120"></el-table-column>
            <el-table-column prop="nullSize" label="没有比赛记录数" width="120"></el-table-column>
            <el-table-column prop="count" label="比赛场次总数" width="120"></el-table-column>
          
          </el-table-column>
      </el-table>
    </div>

    </el-card>

    


    
    <!-- 修改地址的对话框 -->
    <el-dialog title="更多" :visible.sync="dialogVisible" width="94%" @close="addressDialogClosed">
      
      <div>场次:{{changci}}</div>
      
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="1"><el-button @click="checkInfo">查询</el-button></el-col>
      </el-row>

      <el-slider v-model="matchValue" :marks="matchMarks" :min="-12" :max="12" :step="1" show-stops> </el-slider>

      <el-table :data="matchList" border stripe  height="300">
        <el-table-column type="index" label="序号" ></el-table-column>
        <el-table-column label="比赛类型" prop="matchType"></el-table-column>
        <el-table-column label="比赛时间" prop="data"></el-table-column>
        <el-table-column label="具体时间" prop="dataHours"></el-table-column>
        <el-table-column label="主队名称" prop="zhudui"></el-table-column>
        <el-table-column label="主" prop="zhu"></el-table-column>
        <el-table-column label="平" prop="ping"></el-table-column>
        <el-table-column label="客" prop="ke"></el-table-column>
        <el-table-column label="客队名称" prop="kedui"></el-table-column>


        <el-table-column label="主（皇冠）" prop="hzhu" width="90px"></el-table-column>
        <el-table-column label="平（皇冠）" prop="hping" width="90px"></el-table-column>
        <el-table-column label="客（皇冠）" prop="hke" width="90px"></el-table-column>
        <el-table-column label="比分" prop="score" width="45px"></el-table-column>
      </el-table>
    </el-dialog>
    
  </div>
</template>

<script>
import { countBy } from 'lodash';

export default {
  data() {
    return {
      name: '',
      current: '',
      choose: '',
      matchValue: 0,
      matchMarks: {
        '-12': '三球',
        '-11': '两球半/三球',
        '-10': '两球半',
        '-9': '两球/两球半',
        '-8': '两球',
        '-7': '球半/两球',
        '-6': '球半',
        '-5': '一球/球半',
        '-4': '一球',
        '-3': '半球/一球',
        '-2': '半球',
        '-1': '平手/半球',
        '0': '平手',
        '1': '受平手/半球',
        '2': '受半球',
        '3': '受半球/一球',
        '4': '受一球',
        '5': '受一球/球半',
        '6': '受球半',
        '7': '受球半/两球',
        '8': '受两球',
        '9': '受两球/两球半',
        '10': '受两球半',
        '11': '受两球半/三球',
        '12': '受三球'
      },
      dialogVisible: false,
      tableData: [], // 表格信息
      matchInfo: {}, // 头部信息
      matchList: [], // 滑动条信息
      yingkuiList: [],//盈亏数据
      changci: '',
      k : [],
      winLose:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const matchId = this.$route.params.id
      const { data: res } = await this.$http.get('/getMatchById/' + matchId)
      if (!res.success) {
        return this.$message.error('获取失败！')
      }
      this.matchInfo = res.data.match
      this.tableData = res.data.match.cgAsiaeuropetransitionList
      this.yingkuiList   = res.data.match.yingKui
      this.k = res.data.match.kellydiscreteSj
      this.winLose = res.data.match.winLoseSj
      console.log(this.winLose)
    
    },
    addressDialogClosed() {
      this.matchList= []
      this.changci = ''
      // this.$refs.addressFormRef.resetFields()
    },
    showBox(match) {
      this.matchList= []
      this.changci = ''
      // console.log(match)
      this.name = match.name
      this.current = match.yapan
      this.dialogVisible = true
    },
    // 滚动条滑动监听
    async changeSlider(e) {
    },
    // 点击查询
    async checkInfo() {
      const choose = this.matchMarks[this.matchValue]
      // console.log('name', this.name)
      // console.log('current', this.current)
      // console.log('choose', choose)

      const { data: res } = await this.$http.get(`/handicapStatistics?name=${this.name}&current=${this.current}&choose=${choose}`)
      if (!res.success) {
        return this.$message.error('获取失败！')
      }
      // console.log('res', res)
      this.matchList = res.data.matchList
      this.changci   = res.data.count
      console.log(this.changci)
    }
  }
}
</script>

<style lang="less" scoped>
.match-header {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin: 30px 36% 20px;
}

.match-header1 {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin: 0px 43% 0px;
}

.match-header2 {
  display: flex;
  justify-content: space-between;
  margin-left: 25%;
}
.match-header3 {
  display: flex;
  justify-content: space-between;
  margin-left: 10%;
}
.match-header4 {
 
  margin-left:0%;
}

/deep/ .el-slider__marks-text {
  font-size: 9px !important;
}
</style>
